<template>
  <!-- 参与结果组件 -->
  <div style="padding-bottom:20px;" v-show="showResultList">
    <div class="vy-result-list-wrapper">
      <div class="vy-box">
        <div class="vy-box-left">
          {{ showItemType(this.itemType) || "参与" }}结果
        </div>
      </div>
    </div>
    <div class="result-main">
      <a-tabs class="result-tabs" v-model="activeTab" @tabClick="tabChange">
        <a-tab-pane key="1" tab="汇总情况">
          <vy-cmp-result-list
            ref="resultList"
            :leftActivedTab="leftActivedTab"
            :projectId="projectId"
          >
          </vy-cmp-result-list>
        </a-tab-pane>
        <a-tab-pane
          v-if="itemType"
          key="2"
          :tab="showItemType(this.itemType) + '详情'"
        >
          <result-detail
            @getData="getDetailData"
            ref="result_detail"
            :loading="detailLoading"
            :page.sync="detailPage"
            :data="detailData"
          ></result-detail>
        </a-tab-pane>
      </a-tabs>
      <div
        v-show="activeTab === '2'"
        align-items="center"
        class="search-operate"
      >
        <mu-select
          class="search-select"
          solo
          popover-class="select-menu"
          v-model="select"
          @change="getDetailData"
        >
          <mu-option label="全部" value="0"></mu-option>
          <mu-option
            v-for="item in groups"
            :key="item.groupId"
            :label="item.name"
            :value="item.groupId"
          ></mu-option>
        </mu-select>
        <mu-paper :z-depth="1" class="search-input">
          <a-input
            v-model="searchContent"
            :placeholder="'搜索' + showItemType(this.itemType) + '详情'"
            :allowClear="true"
            @pressEnter="onSearch"
          >
            <a-icon slot="suffix" type="search" @click="onSearch" />
          </a-input>
        </mu-paper>
      </div>
      <div
        v-show="activeTab === '2'"
        class="export-detail"
        @click="exportDetailData"
      >
        <img
          src="https://image.xuexiwangzhe.com/FpgoclOWu8FnJGNCeYLbKfkCnnvC"
          class="export-detail-img"
        />
        <div class="export-detail-btn">
          导出{{ showItemType(this.itemType) }}详情
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VyCmpResultList from "./result.vue";
import resultDetail from "./detail.vue";
export default {
  name: "vy-cmp-result-index",
  data() {
    return {
      showResultList: false,
      nums: {
        totalNum: 0, // 全部
        completedNum: 0, // 已完成
        overdueNum: 0, // 逾期完成
        notFinishedNum: 0, // 未完成
      },
      detailLoading: false,
      select: "0",
      searchContent: "",
      search: "",
      itemType: 10,
      groups: [],
      activeTab: "1",
      leftActivedTab: {}, // 左侧激活的菜单项
      projectId: "", // 项目ID
      detailPage: 1,
      detailData: {},
    };
  },
  components: {
    [VyCmpResultList.name]: VyCmpResultList,
    resultDetail,
  },
  methods: {
    hasResults() {
      this.itemType = this.getItemType(this.leftActivedTab.type);
      let params = {
        id: this.leftActivedTab.itemId, // 组件Id
        moduleId: this.leftActivedTab.id, // 主题Id
        moduleType: this.leftActivedTab.type, // 组件类型
        projectId: this.projectId, // 项目Id
        name: "", // 搜索条件
        page: 1, // 分页，页码从1开始
        size: 10, // 每一页大小
      };
      this.$axios.get("/subassembly/getResult", { params }).then((res) => {
        if (res.success) {
          this.showResultList = true;
          this.$parent.isFlod = true;
          // 加载结果列表数据
          this.$refs["resultList"].queryResults({
            current: 1,
            pageSize: 10,
          });
        }
      });
    },
    getUserGroupList() {
      let params = { params: { projectId: this.$parent.projectId || "" } };
      this.$axios.get("/userGroup/index", params).then((res) => {
        console.log(res);
        if (res.success) {
          this.groups = res.userGroupVos;
        } else {
          this.$toast.error("分组列表获取失败，请刷新页面！");
        }
      });
    },
    onSearch() {
      this.search = this.searchContent;
      this.getDetailData();
    },
    exportDetailData() {
      let projectId = this.$parent.projectId || "";
      const params = {
        id: this.leftActivedTab.itemId,
        moduleId: this.leftActivedTab.id,
        moduleType: this.leftActivedTab.type,
        projectId,
        groupId: this.select || 0,
        name: this.search || "",
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };
      const url =
        "https://minitool.xuexiwangzhe.com/miniapp/subassembly/downloadDetails";
      const query = new URLSearchParams(params).toString();
      location.href = url + "?" + query;
    },
    getDetailData() {
      this.itemType = this.getItemType(this.leftActivedTab.type);
      this.detailLoading = true;
      this.getUserGroupList();
      this.detailData = {};
      let projectId = this.$parent.projectId || "";
      const params = {
        id: this.leftActivedTab.itemId,
        moduleId: this.leftActivedTab.id,
        moduleType: this.leftActivedTab.type,
        projectId: projectId,
        name: this.search || "",
        groupId: this.select || 0,
        page: this.detailPage || 1,
        size: 10,
      };
      this.$axios.get("/subassembly/getDetails", { params }).then((res) => {
        if (res.success) {          
          this.detailData =
            (res.subassemblyResultVo &&
              res.subassemblyResultVo.contentVoPage) ||
            null;
          if (this.detailData) {
            this.detailData.themeData = this.leftActivedTab;
            this.detailData.themeData.projectId = projectId;
            this.detailData.themeData.itemType = this.itemType;
          }
        } else {
          this.$toast.error(res.msg);
        }
        this.detailLoading = false;
      });
    },
    showItemType(value) {
      switch (value) {
        case 10:
          return "打卡";
        case 11:
          return "作业";
        case 12:
          return "评估";
        case 13:
          return "考试";
        default:
          return "";
      }
    },
    getItemType(value) {
      switch (value) {
        case 1:
          return 10;
        case 5:
          return 10;
        case 6:
          return 10;
        case 4:
          return 10;
        case 7:
          return 10;
        case 122:
          return 11;
        case 112:
          return 12;
        case 118:
          return 13;
        default:
          return "";
      }
    },
    resetTabs() {
      this.activeTab = "1";
    },
    tabChange(value) {
      switch (value) {
        case "1":
          break;
        case "2":
          this.select = "0";
          this.detailPage = 1;
          this.getDetailData();
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style type="text/css" lang="scss">
.select-menu {
  .mu-option.is-selected {
    .mu-item {
      color: #3366ff;
    }
  }
}
.result-main {
  position: relative;
  padding: 10px 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #fff;
  box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
  border-radius: 8px;

  .result-tabs {
    background-color: #fff;
    margin-bottom: 30px;

    .ant-tabs-top-bar {
      margin-left: 30px;
      margin-right: 30px;
    }
  }

  .export-detail {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: -70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px 10px;
    box-shadow: -2px 5px 8px 0 rgba(126, 133, 146, 0.23);
  }

  .export-detail-img {
    width: 20px;
    margin-bottom: 10px;
  }

  .export-detail-btn {
    writing-mode: vertical-lr;
    letter-spacing: 2px;
    color: #555;
    font-size: 16px;
  }

  .search-operate {
    position: absolute;
    top: 10px;
    right: 30px;
    display: flex;
    align-items: center;
  }

  .search-select {
    width: 100px;
    height: 35px;
    min-height: auto;
    text-align: center;
    margin-right: 15px;
    input {
      text-align: center;
    }
    .mu-select-action {
      margin-left: -30px;
    }
  }

  .search-input {
    width: 220px;
    border-radius: 20px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
    input {
      border: none;
      border-radius: 20px;
      height: 35px;
      &::placeholder {
        color: #a3a3a3;
      }
    }
  }
}
.vy-cmp-result-list {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 10px 30px;

  .vy-cmp-result-list-container {
    .ant-row {
      padding: 10px 0px;
    }
    .vy-cmp-result-list-form {
      .vy-result-state {
        padding: 20px 0;
        margin: 0 10px;
        border-radius: 8px;
        > div {
          padding: 2.5px 0px;
        }
        &.s1 {
          background: rgba(245, 254, 238, 1);
        }
        &.s2 {
          background: rgba(230, 247, 254, 1);
        }
        &.s3 {
          background: rgba(255, 251, 230, 1);
        }
        &.s4 {
          background: rgba(253, 242, 241, 1);
        }
      }

      .ant-table {
        .ant-table-thead > tr > th {
          background: #eef4ff;
          text-align: center;
        }
        .ant-table-tbody > tr > td {
          text-align: center;
        }
      }
    }
  }
}
</style>
